@charset"utf-8";
@import"common/reset";
@import"common/common";
@function r($px) {
    @return $px/$font-size *1rem;
}

.search {
    width: r(269px);
    height: r(55px);
    margin: 0 auto;
    box-sizing: border-box;
    border: r(3px) solid $color;
    margin-top: r(34px);
    border-radius: r(55px);
    padding-left: r(20px);
    padding-right: r(15px);
    position: relative;
    input[type='text'] {
        width: r(191px);
        height: 100%;
        font-size: r(24px);
        color: #7777777;
        border: none;
        padding: 0 r(7px);
    }
    .iconfont {
        position: absolute;
        font-size: r(34px);
        right: r(12px);
        top: 50%;
        transform: translateY(-50%);
        color: $color;
    }
}

.sou {
    width: 100%;
    text-align: center;
    vertical-align: middle;
    margin-top: r(32px);
    .sou_1 {
        font-size: r(26px);
    }
    .sou_2 {
        margin: 0 r(64px);
        a {
            width: 24%;
            height: r(64px);
            float: left;
            display: inline-block;
            background: #dcdcdc;
            font-size: r(20px);
            line-height: r(64px);
            color: #898989;
            margin-right: 1%;
            margin-bottom: 3px;
        }
    }
}

.de {
    width: 100%;
    .de_1 {
        font-size: r(30px);
        margin-top: r(37px);
        .tags {
            vertical-align: super;
        }
        img {
            height: r(47px);
            margin-left: r(39px);
        }
    }
    .de_2 {
        margin-top: r(32px);
        font-size: r(24px);
        margin-right: r(21px);
        img {
            width: r(27px);
            height: r(27px);
            vertical-align: sub;
        }
    }
}

.diet {
    width: 100%;
    height: r(354px);
    .sg {
        width: 38%;
        float: left;
        margin-left: 2%;
        img {
            width: 100%;
        }
    }
    .mk {
        width: 58%;
        margin-left: 2%;
        float: left;
        .mk_1 {
            width: 90%;
            float: left;
            img {
                width: 100%;
            }
        }
        .mk_2 {
            width: 45%;
            float: left;
            img {
                width: 100%;
                height: r(199px);
            }
        }
        .mk_3 {
            width: 43%;
            float: left;
            margin-left: 2%;
            img {
                width: 100%;
                height: r(199px);
            }
        }
    }
}

.nominate {
    width: 100%;
    margin-top: r(50px);
    .nominate_1 {
        width: 32%;
        margin-left:2%;
        img {
            width: 100%;
            height:r(200px);
        }
    }
    .nominate_2 {
        width: 29%;
         margin-left:2%;
        img {
            width: 100%;
            height:r(200px);
        }
    }
    .nominate_3 {
        width: 31%;
         margin-left:2%;
        img {
            width: 100%;
            height:r(200px);
        }
    }
}